<template>
  <div class="bg-gray-50 h-screen flex flex-col">
    <!-- 直播封面区域 -->
    <div
      class="h-1/3 flex items-center justify-center hide-pause flex-shrink-0 flex-col"
    >
      <!-- <div class="w-screen h-1/3 relative hide-pause"> -->
      <img
        v-if="store.courseData.preheatMode == 0"
        :src="store.courseData.preheatImg || coverImage"
        alt="Course Cover"
        class="w-full h-full object-cover"
      />
      <video
        ref="videoRef"
        v-else
        :src="store.courseData.preheatVideo.link"
        class="w-full h-full object-cover"
        playsinline
        controls
      ></video>
      <!-- <div
          v-if="store.courseData.preheatMode == 1"
          class="absolute inset-0 flex items-center justify-center"
          @click="playVideo"
        >
          <van-icon
            name="play-circle-o"
            size="48"
            class="text-white opacity-80"
          />
        </div> -->
      <!-- </div> -->
    </div>

    <!-- 直播信息区域 -->
    <div class="px-4 mt-6" v-if="!playerStore.isKeyboardVisible">
      <div class="bg-white rounded-xl shadow-sm p-4">
        <!-- 直播标题 -->
        <h2 class="text-2xl font-bold text-gray-800 mb-2">
          {{ store.courseData.title }}
        </h2>

        <!-- 即将开始提示 -->
        <div class="flex items-center mb-2">
          <van-tag type="success" class="!mr-2">即将开始</van-tag>
          <span class="text-gray-500 text-sm"
            >{{ countdownStore.startTime }} 开始</span
          >
        </div>

        <!-- 倒计时展示 -->
        <div class="flex justify-center items-center py-4">
          <div class="text-center">
            <div class="text-4xl font-mono font-bold text-[#4CAF50]">
              {{ countdownStore.formattedDays }}天
            </div>
            <!-- <div class="text-gray-500 text-sm">Days</div> -->
          </div>
          <div class="text-3xl mx-2">:</div>
          <div class="text-center">
            <div class="text-4xl font-mono font-bold text-gray-800">
              {{ countdownStore.formattedHours }}:{{
                countdownStore.formattedMinutes
              }}:{{ countdownStore.formattedSeconds }}
            </div>
            <!-- <div class="text-gray-500 text-sm">HH:MM:SS</div> -->
          </div>
        </div>

        <!-- 辅助提示 -->
        <div class="text-center text-gray-400 text-sm mt-4">
          直播即将开始，请提前做好准备
        </div>
      </div>
    </div>
    <Interaction
      v-if="store.courseData?.hasBeforChat == 1"
      class="mx-4 h-auto flex-1"
    />
  </div>
</template>

<script setup lang="ts">
import coverImage from "@/assets/cover_course.jpg";
import { useCourseCountdown, useCourseData } from "../../store/useLiveCourse";
import { onMounted, ref, watch, nextTick, onBeforeUnmount } from "vue";
import { showLoadingToast, closeToast } from "vant";
import Plyr from "plyr";
import "plyr/dist/plyr.css";
import Interaction from "@/components/Interaction.vue"; // 使用封装的互动组件
import { usePlayerStore } from "@/store/usePlayer";
import { useKeyboard } from "@/store/useKeyboard";
useKeyboard(
  () => {
    playerStore.setKeyboardVisible(true);
    window.scrollTo(0, 0);
  },
  () => {
    playerStore.setKeyboardVisible(false);
  }
);
const playerStore = usePlayerStore();
const store = useCourseData();
const countdownStore = useCourseCountdown();

const plyrInstance = ref<Plyr | null>(null);
const videoRef = ref<HTMLVideoElement | null>(null);

onMounted(() => {
  if (store.remainingTime == null) {
    showLoadingToast({
      message: "加载中...",
      forbidClick: true,
      duration: 0
    });
  }
  // 初始化 plyr
  nextTick(() => {
    if (videoRef.value) {
      plyrInstance.value = new Plyr(videoRef.value, {
        controls: ["play", "mute", "fullscreen"]
      });
    }
  });
});

onBeforeUnmount(() => {
  if (plyrInstance.value) {
    plyrInstance.value.destroy();
    plyrInstance.value = null;
  }
});

watch(
  () => store.remainingTime,
  nv => {
    if (nv == 0) {
      showLoadingToast({
        message: "加载中...",
        forbidClick: true,
        duration: 0
      });
    } else {
      closeToast();
    }
  }
);
</script>

<style scoped lang="less">
/* 自定义分割线样式 */
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

:deep(.plyr__controls__item.plyr__control.plyr__control--pressed:first-child) {
  display: none !important;
}
.hide-pause > :first-child {
  flex-grow: 1;
  width: 100%;
}
</style>
